<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/img/logo.png"/>
    <title>启慧信息技术公司人事管理系统</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/mmss.css"/>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<section>
    <div class="container">
        <div class="row ">
            <div class="col-xs-12">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="/main"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">系统管理</li>
                    <li class="active">用户信息(部门职位)</li>
                </ol>
                <!--顶部搜索栏开始,按照指定的条件进行搜索-->
                <form th:action="@{/user/list1}">
                    <div class="input-group line left">
                        <span class="input-group-addon" id="basic-addon2">
                            <span class="glyphicon glyphicon-search">
                            </span>
                        </span>

                        <input name="searchContent" type="text" class="form-control" placeholder="输入关键字搜索" aria-describedby="basic-addon2">
                    </div>
                    <select name = "option" class="form-control line left">
                        <option value="user_id">用户id</option>
                        <option value="name">用户姓名</option>
                        <option value="sex">用户性别</option>
                        <option value="department_name">部门名称</option>
                        <option value="position_name">职位名称</option>
                    </select>

                    <button shiro:hasPermission="user:search1" type="submit" class=" btn btn-primary ">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                    <button  shiro:hasRole="user:search2" type="submit" class=" btn btn-primary ">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                   <!-- <a shiro:hasPermission="permission:add" href="#" class="btn btn-primary btn-sm"
                       data-toggle="modal" data-target="#add1">添加</a>-->
                </form>
                <br/><br/>
                <!--顶部搜索栏结束-->
                <!--table表用来显示数据-->
                <table class="table table-bordered  table-condensed table-striped text-center bg-info">
                    <!--表头信息开始-->
                    <thead>
                        <tr class="info">
                            <th class="text-center">用户id</th>  <!--0-->
                            <th class="text-center">用户姓名</th>  <!--1-->
                            <th class="text-center">用户性别</th> <!--2-->
                            <th class="text-center">所属部门</th> <!--3-->
                            <th class="text-center">所属职位</th> <!--4-->
                            <th class="text-center">操作</th> <!--5-->
                        </tr>
                    </thead>
                    <!--表头信息结束-->
                    <!--表数据开始-->
                    <tbody>
                        <!--输出封装在model中的pageInfo数据-->

                        <tr th:each="user2:${pageInfo.getResult()}">
                            <td th:text="${user2.userId}"></td>
                            <td th:text="${user2.name}"></td>
                            <td th:text="${user2.sex}"></td>
                            <!--<td th:text="${user2.department.departmentName}" ></td>
                            <td th:text="${user2.position.positionName}" ></td>-->
                            <!--直接在text属性中判为空,就可以解决问题,if不能解决-->
                            <td th:text="${user2.department!=null ?user2.department.departmentName :''}" ></td>
                            <td th:text="${user2.position!=null ? user2.position.positionName: ''}" ></td>
                            <td>
                                <a  shiro:hasPermission="user:edit1"
                                class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit" onclick="edit(this)">编辑</a>

                            </td>
                            <!--模态框开始-->
                            <!--修改模态框开始-->
                            <div class="modal fade" id="edit" tabindex="-1" role="dialog"  aria-labelledby="edit">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title" id="edit11">修改</h4>
                                        </div>
                                        <form th:action="@{/user/edit1}" method="post">
                                            <div class="modal-body">
                                                <ul>
                                                    <li class="form-inline" hidden="hidden">
                                                        <label><span>用户id</span></label>
                                                        <input type="hidden"  readonly name="userId" id="userId"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>用户姓名</span></label>
                                                        <input type="text"  readonly name="name" id="name"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>用户性别</span></label>
                                                        <input type="text"  readonly name="sex" id="sex"/>
                                                    </li>

                                                    <li class="form-inline">
                                                        <label><span>所属部门:</span></label>
                                                        <select class="form-control form-group-sm" name="departmentId" id="departmentId" >
                                                            <option >------请选择所属部门------</option>
                                                            <option th:each="department:${departmentList}"
                                                                    th:id="${department.departmentId}"
                                                                    th:value="${department.departmentId}"
                                                                    th:text="${department.departmentName}"
                                                                    onchange="updatePosition(${department.departmentId})">
                                                            </option>
                                                        </select>
                                                    </li>

                                                    <li class="form-inline">
                                                        <label><span>所属职位:</span></label>
                                                        <select class="form-control form-group-sm"  name="positionId" id="positionId">
                                                            <option>------请选择所属职位------</option>
                                                            <option th:each="position:${positionList}"
                                                                    th:id="${position.positionId}"
                                                                    th:value="${position.positionId}"
                                                                    th:text="${position.positionName}"
                                                            >
                                                            </option>
                                                        </select>
                                                    </li>

                                                </ul>
                                            </div>
                                            <!--模态框底部的取消和保存按钮-->
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--修改模态框结束-->
                            <!--模态框结束-->

                        </tr>
                    </tbody>
                    <!--表数据开始-->
                </table>
                <!--分页-->
                <ul class="pagination right">
                    <div>
                        当前第 [[${pageInfo.pageNum}]]页，共 [[${pageInfo.pages}]] 页， 共 [[${pageInfo.total}]] 条记录
                    </div>
                    <!--上一页按钮-->
                    <li th:class="${pageInfo.getPageNum()<=1 ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()<=1}" onclick="return checkDisable(this)" href="#" th:href="@{/user/list1(pageNum=${pageInfo.getPageNum()-1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}"  aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>

                    <li th:class="${pageInfo.getPageNum()==1 ? 'active' :''}"><a href="#" th:href="@{/user/list1(pageNum=1,pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}">1</a></li>

                    <li ><a href="#">...</a></li>

                    <li th:if="${pageInfo.getPageNum()!=1 and pageInfo.getPageNum()!=pageInfo.getPages()}" th:class="active"><a href="#" th:text="${pageInfo.getPageNum()}"><span class="sr-only"></span></a></li>

                    <li ><a href="#">...</a></li>

                    <li th:class="${pageInfo.getPageNum()==pageInfo.getPages() ? 'active' :''}"><a href="#" th:href="@{/user/list1(pageNum=${pageInfo.getPages()},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" th:text="${pageInfo.getPages()}"></a></li>

                    <!--下一页按钮-->
                    <li th:class="${pageInfo.getPageNum()>=pageInfo.getPages() ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()>=pageInfo.getPages()}" onclick="return checkDisable(this)"  href="#" th:href="@{/user/list1(pageNum=${pageInfo.getPageNum()+1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                    </li>

                </ul>
            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>
</body>
</html>

<script src="/static/js/jquery-1.11.3.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script>
    function edit(ob){
        var aDate = $(ob).parent().parent().find("td");
        console.log(aDate.eq(3).text());
        console.log(aDate.eq(4).text());
        $("#userId").val(aDate.eq(0).text());
        $("#name").val(aDate.eq(1).text());
        $("#sex").val(aDate.eq(2).text());
        $("#departmentId").val(aDate.eq(3).text());
        $("#positionId").val(aDate.eq(4).text());

    }

    function checkDisable(obj){
        var attr = $(obj).attr("disabled");
        return attr !== "disabled";
    }



</script>